<template>


  <el-dialog :title="'部门' + (type == 'add'?'添加':'编辑' )" :visible="visible" @close="visible = false">
    <el-form :model="form" label-width="90px">
      <el-form-item label="区域">
        <el-input  disabled v-model="areaName"/>
      </el-form-item>
      <el-form-item label="名称">
        <el-input   v-model="form.name"/>
      </el-form-item>
      <el-form-item label="简称">
        <el-input   v-model="form.shortName"/>
      </el-form-item>
      <el-form-item label="类型">
        <dict-select code="DepType" v-model="form.type"/>
      </el-form-item>
      <el-form-item label="权限">
        <role-select v-model="form.roles" @not-contain="notContain" url="/api/v1/sdep/arls"/>
      </el-form-item>
      <el-form-item label="已有权限" v-if="nCtn.length > 0">
        <span style="padding-right:10px;" :key="n.id" v-for="n in nCtn">{{n.name}}</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" >
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="loading"  @click="onOk">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import axios from '@/util/axios';
  import DictSelect from '@/components/DictSelect';
  import RoleSelect from '@/components/RoleSelect';
  import {arrUnique,isInArr} from "@/util/arr";


  const allRoles = [];

  const form = () => {
    return {
      name:'',
      shortName:'',
      type:'',
      roles:[]
    }
  }

  export default {

    components: {DictSelect,RoleSelect},

    data(){
      return {
        form:form(),
        loading:false,
        areaName:'',
        type:'add',
        visible:false,
        nCtn:[]
      };

    },

    methods: {

     notContain(nctn){
        axios.post('/api/v1/suser/rolenames',axios.form({roles:nctn}))
        .then(({data})=>{
          data && (this.nCtn = data);
        })
     },

      onOk(){
        const exec = (this.type == 'add') ? axios.put :axios.patch;
        this.loading = true;
        const fm = Object.assign([],this.form);
        fm.roles = Object.assign([],this.form.roles);
        if(this.nCtn.length > 0){
          for(const n of this.nCtn){
            if(!isInArr(n.id,fm.roles)){
              fm.roles.push(n.id);
            }
          }
        }
        fm.roles = arrUnique(fm.roles);
        exec('/api/v1/sdep',axios.form(fm))
        .then(() =>{
          this.$message.success(((this.type == 'add') ? '添加':'修改') + '成功');
          this.loading = false;
          this.$emit('success');
          this.visible = false;
        })
        .catch(e => this.loading = false);

      },

      add(areaId,areaName){
        this.nCtn = [];
        this.form = form();
        this.visible = true;
        this.type = 'add';
        this.areaName = areaName;
        this.form.areaId = areaId;
      },

      edit(areaId,areaName,id){
        this.nCtn = [];
        this.form = form();
        this.visible = true;
        this.type = 'edit';
        this.areaName = areaName;
        axios.get(`/api/v1/sdep/get/${id}`)
        .then(({data}) => {
          this.form = data;
          this.form.areaId = areaId;
        });

      }

    }
  }
</script>

